<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <d2-crud-x 
        ref="d2Crud" 
        v-bind="_crudProps" 
        v-on="_crudListeners"
        :loading="loading"
        :loading-options="loadingOptions"
        @editProject="editProject"
    >
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button size="small" type="primary" @click="addRow"
            ><i class="el-icon-plus" /> 新增</el-button
          >
        </el-button-group>
        <crud-toolbar
          :search.sync="crud.searchOptions.show"
          :compact.sync="crud.pageOptions.compact"
          :columns="crud.columns"
          @refresh="doRefresh()"
          @columns-filter-changed="handleColumnsFilterChanged"
        />
      </div>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
export default {
  name: 'page1',
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      loading: true,
      loadingOptions: {
        spinner: 'el-icon-loading',
        text:'加载中。。。'
      }
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    async pageRequest (query) {
      this.loading = true;
      let list = await api.GetList(query);
      this.loading = false;
      return list;
    },
    addRequest (row) {
      return api.AddObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    // 授权
    editProject (scope) {
      this.$router.push({
        name: 'compBtn',
        query: { id: scope.row.id, name: scope.row.name }
      })
    },
  }
}
</script>
